<template>
	<div class="zm-area">
		<div class="item-con flex" @click="show">
			<el-input readonly :placeholder="placeholder" v-model="area" :disabled="disabled" />
			<i class="el-icon-caret-bottom icon" />
		</div>
		<van-popup v-model="popShow" round position="bottom">
			<van-area
				ref="area"
				:value="currVal"
				:area-list="areaList"
				@confirm="onConfirm"
				@cancel="onCancel"
			/>
		</van-popup>
	</div>
</template>
<script>
import { Area, Popup } from "vant";
import { areaList } from "@/assets/countryLevel3";
import { isArray, last } from "cl-admin/utils";

export default {
	name: "ZmArea",
	components: {
		VanArea: Area,
		VanPopup: Popup
	},
	props: {
		value: [String, Number, Array],
		placeholder: String,
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			areaList,
			popShow: false,
			currVal: ""
		};
	},
	computed: {
		area() {
			const { value } = this;
			if (!value.length) {
				return "";
			}
			let province = areaList.province_list[value[0]] || "";
			let city = areaList.city_list[value[1]] || "";
			let county = areaList.county_list[value[2]] || "";
			return [province, city, county].join("-");
		}
	},
	watch: {
		value(v) {
			this.currVal = isArray(v) ? v.join(",") : v;
		}
	},
	created() {
		this.currVal = isArray(this.value) ? this.value.join(",") : this.value;
	},
	methods: {
		show() {
			if (this.disabled) return;
			this.popShow = true;
			this.$nextTick(() => {
				this.$refs.area.reset(last(this.value));
			});
		},
		onConfirm(val) {
			let res = val.map(v => v.code);
			this.onCancel();
			this.$emit("input", res);
		},
		onCancel() {
			this.popShow = false;
		}
	}
};
</script>
<style lang="scss" scoped>
.zm-area {
	.item-con {
		align-items: center;
		padding-bottom: 0.1rem;
		border-bottom: 1px solid #dfdfdf;
		.icon {
			color: #999;
		}
	}
}
::v-deep .el-input.is-disabled .el-input__inner {
	background-color: transparent;
}
</style>
